<template>
  <el-dialog
    v-if="mapVisible"
    custom-class="map-dialog"
    width="70vw"
    append-to-body
    title="标注"
    :visible="mapVisible"
    @close="handleMapClose"
  >
    <template v-if="markType === 1">
      <el-input v-model="address" placeholder="请输入地址来直接查找相关位置" style="margin-bottom: 20px" @keyup.enter.native="handleConfirm" />
      <baidu-map class="bm-view" :scroll-wheel-zoom="true" :center="location" :zoom="19" @click="getLocationPoint">
        <bm-local-search :keyword="address" :auto-viewport="true" :zoom="19" style="display: none" />
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" @locationSuccess="handleLocationSuccess" />
        <bm-marker :position="position" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
      </baidu-map>
    </template>

    <template v-else>
      <div v-if="!isHideBtns" class="btns">
        <el-button size="small" type="primary" @click="toggle('polyline')">
          {{ polyline.editing ? '停止绘制' : '开始绘制' }}
        </el-button>
        <el-button size="small" @click="handleAgain">
          重新绘制
        </el-button>
        <span> (鼠标左键绘制, 右键停止)</span>
      </div>

      <baidu-map
        class="bm-view"
        :center="location"
        :zoom="19"
        :scroll-wheel-zoom="true"
        @mousemove="syncPolyline"
        @click="paintPolyline"
        @rightclick="newPolyline"
      >
        <bm-polyline v-for="(path, key) of polyline.paths" :key="key" :path="path" />
      </baidu-map>
    </template>

    <span v-if="!isHideBtns" slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="handleMapSubmit">保存</el-button>
      <el-button size="small" @click="handleMapClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* eslint-disable no-undef */
export default {
  name: 'DialogMap',
  props: {
    mapVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      address: '', // 地址
      position: {}, // 经纬度
      location: {
        lng: 113.274464,
        lat: 22.930752
      },
      zoom: 18,

      polyline: {
        editing: false,
        paths: []
      },
      markType: 1,
      isHideBtns: false,

      coordinateSet: null // 位置值

    }
  },
  watch: {
    mapVisible() {
      if (!this.mapVisible) this.polyline.editing = false
    }
  },
  methods: {
    handleMapSubmit() {
      this.handleMapClose()
      this.$emit('setCoordinate')
    },

    handleMapClose() {
      this.$emit('update:mapVisible', false)
    },

    getLocationPoint(e) {
      this.lng = e.point.lng
      this.lat = e.point.lat
      /* 创建地址解析器的实例 */
      const geoCoder = new BMap.Geocoder()
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        // let { address } = res
        // if (res.surroundingPois && res.surroundingPois.length) {
        //   address = res.surroundingPois[0].address ? res.surroundingPois[0].address : address
        // }
        // this.address = address
        const { point } = res
        delete point.of
        this.position = point
        this.coordinateSet = [point]
      })
    },
    handleLocationSuccess({ addressComponent, marker }) {
      const { province, city, district, street, streetNumber } = addressComponent
      this.address = province + city + district + street + streetNumber
      delete marker.point.of
      this.position = marker.point
      this.coordinateSet = [marker.point]
    },
    handleConfirm(e) {
      // eslint-disable-next-line no-undef
      const geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.address, point => {
        delete point.of
        this.position = point
        this.coordinateSet = [point]
      })
    },

    toggle(name) {
      this[name].editing = !this[name].editing
    },
    syncPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
      this.coordinateSet = this.polyline.paths[0]
    },
    paintPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
    handleAgain() {
      this.polyline.paths = []
      this.coordinateSet = null
    },
    setPosition(position = {}, markType, address, isHideBtns = false) { // 外部调用设置
      this.coordinateSet = markType === 1 ? [position] : position
      this.position = position
      // this.address = address
      this.polyline.paths[0] = position
      this.markType = markType
      this.isHideBtns = isHideBtns
    }
  }
}
</script>

<style lang="scss" scoped>
.btns {
  margin-bottom: 20px;
}

.bm-view {
  width: 100%;
  height: 600px;
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
